import Error403 from '@/views/403'
import Error404 from '@/views/404'
import Index from '@/views/index'
import React from 'react'
import { Navigate, createBrowserRouter } from 'react-router-dom'
import { lazyLoad } from './LazyLoad'

export const router = [
  {
    path: '/',
    element: <Index />
  },
  {
    path: '/demo',
    element: lazyLoad(React.lazy(() => import('@/views/demo')))
  },
  {
    path: '/first-demo',
    element: lazyLoad(React.lazy(() => import('@/views/first-demo')))
  },
  {
    path: '/canvas',
    element: lazyLoad(React.lazy(() => import('@/views/canvas')))
  },
  {
    path: '/shape',
    element: lazyLoad(React.lazy(() => import('@/views/shape')))
  },
  {
    path: '/text',
    element: lazyLoad(React.lazy(() => import('@/views/text')))
  },
  {
    path: '/image',
    element: lazyLoad(React.lazy(() => import('@/views/image')))
  },
  {
    path: '/free-drawing',
    element: lazyLoad(React.lazy(() => import('@/views/free-drawing')))
  },
  {
    path: '/styles',
    element: lazyLoad(React.lazy(() => import('@/views/styles')))
  },
  {
    path: '/event',
    element: lazyLoad(React.lazy(() => import('@/views/event')))
  },
  {
    path: '/importAndExport',
    element: lazyLoad(React.lazy(() => import('@/views/importAndExport')))
  },
  {
    path: '/textToImg',
    element: lazyLoad(React.lazy(() => import('@/views/textToImg')))
  },
  {
    path: '*',
    element: <Navigate to='/404' />
  },
  {
    path: '/403',
    element: <Error403 />
  },
  {
    path: '/404',
    element: <Error404 />
  }
]

export default createBrowserRouter(router)
